import React, {JSX, useCallback, useState} from 'react';
import {View, StyleSheet, TextInput, NativeModules} from 'react-native';
import {BasicNavBar} from '../../kit/navigationBar';
import {BasicText} from '../../kit/text';
import {BasicButtom} from '../../kit/buttom';
import {useUserContext} from '../../context/UserContext';
import { useNavigation } from '@react-navigation/native';
import { normalize } from '../../utils/adapter';

type Params = {
  name: string;
  phone: string;
  alipayAccount: string;
};
type InputViewProps = {
  label: string;
  value: string;
  fields: keyof Params;
  onChangeText: (fields: keyof Params, value: string) => void;
};

const InputView = function ({
  label,
  value,
  fields,
  onChangeText,
}: InputViewProps): JSX.Element {
  const handleChange = useCallback(
    (val: string) => {
      onChangeText(fields, val);
    },
    [fields, onChangeText],
  );

  return (
    <View style={styles.input_view}>
      <BasicText color="#333">{label}：</BasicText>
      <TextInput
        style={styles.text_input}
        placeholder="请输入"
        value={value}
        onChangeText={handleChange}
      />
    </View>
  );
};

export default function (): JSX.Element {
  const usectx = useUserContext();
  const navigate = useNavigation();
  const {bridgeModule} = NativeModules;
  const [param, setParams] = useState<Params>({
    name: '',
    phone: '',
    alipayAccount: '',
  });

  const onChangeText = useCallback((fields: keyof Params, value: string) => {
    setParams(prevState => ({
      ...prevState,
      [fields]: value,
    }));
  }, []);

  const onPress = useCallback(() => {
    usectx?.set('isBindAliPay', true);
    navigate.goBack();
    bridgeModule.showToast('绑定成功');
  }, [usectx, bridgeModule, navigate]);

  return (
    <View style={styles.container}>
      <BasicNavBar title="绑定支付宝" />
      <View style={styles.content_view}>
        <View style={{flex: 1}}>
          <InputView
            label="姓名"
            value={param.name}
            fields={'name'}
            onChangeText={onChangeText}
          />
          <InputView
            label="手机号码"
            value={param.phone}
            fields={'phone'}
            onChangeText={onChangeText}
          />
          <InputView
            label="支付包账号"
            value={param.alipayAccount}
            fields={'alipayAccount'}
            onChangeText={onChangeText}
          />
        </View>
        <BasicButtom text="立即绑定" onPress={onPress} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content_view: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: normalize(20),
    paddingBottom: normalize(50),
  },
  input_view: {
    backgroundColor: '#F6F6F6',
    paddingHorizontal: normalize(16),
    borderRadius: normalize(8),
    flexDirection: 'row',
    marginBottom: normalize(16),
    alignItems: 'center',
  },
  text_input: {
    height: normalize(40),
    margin: normalize(12),
    padding: normalize(10),
    flex: 1,
  },
});
